<!--
 * @Author: your name
 * @Date: 2025-06-09 13:40:30
 * @LastEditors: your name
 * @LastEditTime: 2025-07-03 14:28:11
 * @Description: 
 * @FilePath: \206-Admin\src\components\MessagePopup\index.vue
-->
<template>
    <div id="Notify"></div>
</template>

<script setup>
import { onMounted, onUnmounted, getCurrentInstance, ref } from 'vue';
import { filterCommon } from '@/utils/utils';
import { faultType } from '@/utils/type';
import audioUrl from '@/assets/sond/alarm.mp3';
import { ElNotification } from 'element-plus'; // 引入 ElNotification


const audio = new Audio(audioUrl);
let thisAudioTimer = null;
const isAudioPlaying = ref(false); // 新增标志位

const emit = defineEmits(['navigate'])
// 定义 handleMessage 函数
const handleMessage = (event) => {
    try {
        const message = event.data;
        // const data = JSON.parse(message);
        let notify = ElNotification({
            title: `设备报警信息`,
            type: 'error',
            duration: 0,
            onClick: () => {
                // stopAudio(); // 停止音频
                let path = '/cloudTv/warning/grounding';
                emit('navigate', path);
                ElNotification.closeAll();
            },
            dangerouslyUseHTMLString: true, 
            position: 'bottom-right',
            message: `<div class="notify-content">${message}</div>`
        });
        // if (!isAudioPlaying.value) {
        //     isAudioPlaying.value = true;
        //     audio.play();
        //     thisAudioTimer = setInterval(() => {
        //         audio.play();
        //     }, 2000);
        // }
    } catch (error) {
        console.error('处理消息出错:', error);
    }
};

// 封装 stop 函数
const stopAudio = () => {
    clearInterval(thisAudioTimer);
    audio.pause();
    audio.currentTime = 0;
    isAudioPlaying.value = false;
};

// 关闭所有通知的方法
const closeAllNotifications = () => {
    ElNotification.closeAll();
};

const rou = () => {
   console.log(router);
   
};

// 导出 handleMessage 方法，以便外部调用
defineExpose({
    handleMessage
});

onMounted(() => {
    // 初始化操作
});

onUnmounted(() => {
    clearInterval(thisAudioTimer);
    stopAudio();
    closeAllNotifications(); // 组件卸载时关闭所有通知
});
</script>
<style lang="scss">
.notify-content {
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
        color: #0088ee;
    }
}
</style>
